<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script>

	var can, ctx;
	window.onload = function() {
		var r = document.getElementById('rect');
		var fr = document.getElementById('fillRect');
		
		var ar = document.getElementById('alphaRect');
		var alpha = document.getElementById('rand');
		
		var lw = document.getElementById('lineW');
		var br = document.getElementById('boldRect');
		

		can = document.getElementById('canvas');
		ctx = can.getContext('2d');

		r.onclick = function() {
			//선색
			ctx.strokeStyle = 'rgb(255,0,0)';
			ctx.strokeRect(10, 10, 200, 200);

		}

		fr.onclick = function() {
			ctx.strokeStyle = 'rgb(0,0,255)';
			ctx.fillStyle = 'rgb(255,200,200)';
			ctx.fillRect(240, 10, 200, 200);
		}

		ar.onclick = fillR;
		alpha.onchange = fillR;
		
		br.onclick=boldR;
		lw.onchange=boldR;
		
	}

	function fillR() {
		var v = document.getElementById('rand').value;

		ctx.clearRect(10, 230, 360, 360);

		ctx.fillStyle = 'rgba(255,0,0,' + v + ')';
		ctx.fillRect(10, 230, 200, 200);

		ctx.fillStyle = 'rgba(255,0,255,' + v + ')';
		ctx.fillRect(105, 310, 200, 200);

	}
	
	function boldR(){
		var v= document.getElementById('lineW').value;
		ctx.clearRect(400, 230, 200, 200);
		
		
		ctx.lineWidth=v;
		ctx.fillStyle='rgb(0,0,255)';
		ctx.strokeRect(400,230,200,200);
		
	}
</script>

</head>


<body>
<canvas id='canvas' width='800px' height='700px'></canvas>
<p/>
<input type='button' value='사각형' id='rect'>
<p/>
<input type='button' value='채워진 사각형' id='fillRect'>
<p/>
<input type='range' min='0' max='1' step='.1' id='rand'>
<input type='button' value='투명 사각형' id='alphaRect'>

<p/>

<input type='range' min='0' max='30' step='1' id='lineW'>
<input type='button' value='굵은 사각형' id='boldRect'>

</body>
</html>